/**
 * Created by ste on 2018/1/9.
 */
import React, { Component } from 'react';
import {
  StyleSheet,
  View,
  TouchableOpacity,
} from 'react-native';


const styles = StyleSheet.create({
  circle: {
    width: 20,
    height: 20,
    borderRadius: 10,
    borderWidth: StyleSheet.hairlineWidth,
    borderColor: 'gray',
  },
  circleSelected: {
    width: 20,
    height: 20,
    borderRadius: 10,
    borderWidth: StyleSheet.hairlineWidth,
    borderColor: 'gray',
    backgroundColor: 'red',
  },
});

export default class Circle extends Component {
  clickAll = () => {
    const { clickChecked } = this.props;
    clickChecked();
  };
  render() {
    const { checked } = this.props;
    const cricleStyle = checked ? styles.circleSelected : styles.circle;
    return (
      <TouchableOpacity onPress={() => this.clickAll()}>
        <View style={cricleStyle} />
      </TouchableOpacity>
    );
  }
}
